<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>数字海南</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.4.1 -->
  <link rel="stylesheet" href="/leader/css/bootstrap.min.css">
  <link rel="stylesheet" href="/leader/fonts/font-awesome.min.css">
  <link rel="stylesheet" href="/leader/css/leader.css?2">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
  <div class="wrapper">
    <div class="container-fluid">
      <!-- 资产与运维管理系统可视化大屏 -->
      <div class="row no-gutters header" style="margin-left: -15px; margin-right: -15px;">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          <div class="page-title">资产与运维管理系统可视化大屏</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div style="padding: 0 20px;">
            <div class="box asset-box" style="margin-top:120px;">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title">资产在线状态</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="asset-online-stats" class="inner">
                      <table class="table table-custom">
                        <tbody>
                          <tr>
                            <td><img src="/leader/assets/online.png" /></td>
                            <td><span style="color: #fff;">在线</span></td>
                            <td><span id="assetOnlineCount"></span></td>
                            <td>台/套</td>
                          </tr>
                          <tr>
                            <td><img src="/leader/assets/offline.png" /></td>
                            <td><span style="color: #fff;">下线</span></td>
                            <td><span id="assetOfflineCount"></span></td>
                            <td>台/套</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="box asset-trend-box">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title">资产在线变化趋势</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="asset-online-trend-stats" class="inner-nopadding"></div>
                  </div>
                </div>
              </div>
            </div> -->

            <div class="box asset-top5-box">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title">资产数量TOP5</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="asset-top5-stats" class="inner-nopadding" style="height: 480px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div style="padding: 0 100px; margin-top: 60px;">
            <div class="box overview-box">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title" style="font-size: 24px; height: 60px; line-height: 60px;"><span
                  style="color: #fff;">服务已进驻</span> <span id="serviceDayCount"></span> 天</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div class="inner-nopadding" style="padding: 0 30px;">
                      <div class="row">
                        <div class="col-md-6">
                          <div style="padding: 0 20px;">
                            <table class="table table-custom">
                              <tbody>
                                <tr>
                                  <td><span style="color: #fff;">服务厅局</span></td>
                                  <td><span id="instCount"></span></td>
                                  <td>个</td>
                                </tr>
                                <tr>
                                  <td><span style="color: #fff;">服务事项</span></td>
                                  <td><span id="totalServiceCount"></span></td>
                                  <td>次</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div style="padding: 0 20px;">
                            <table class="table table-custom">
                              <tbody>
                                <tr>
                                  <td><span style="color: #fff;">运维资产</span></td>
                                  <td><span id="assetCount"></span></td>
                                  <td>台/套</td>
                                </tr>
                                <tr>
                                  <td><span style="color: #fff;">服务时长</span></td>
                                  <td><span id="totalServiceTime"></span></td>
                                  <td>小时</td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="box map-box" style="margin-top:40px; height: 100%;">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="map">
                      <table class="table">
                        <thead>
                          <tr>
                            <th style="width: 10%;">#</th>
                            <th style="width: 40%;">厅局名称</th>
                            <th>驻场人员</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="col-md-3">
          <div style="padding: 0 20px;">
            <div class="box asset-box" style="margin-top:120px;">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title">故障处理状态</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="malfunction-stats" class="inner">
                      <table class="table table-custom">
                        <tbody>
                          <tr>
                            <td><img src="/leader/assets/bug.png" /></td>
                            <td><span style="color: #fff;">正在处理</span></td>
                            <td><span id="malfunctionProcessingCount"></span></td>
                            <td>件</td>
                          </tr>
                          <tr>
                            <td><img src="/leader/assets/bug-fix.png" /></td>
                            <td><span style="color: #fff;">本月解决</span></td>
                            <td><span id="malfunctionMonthFinishedCount"></span></td>
                            <td>件</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="box asset-trend-box">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title">巡检服务状态</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="malfunction-stats" class="inner-nopadding">
                      <table class="table table-custom">
                        <tbody>
                          <tr>
                            <td><img src="/leader/assets/daily.png" /></td>
                            <td><span style="color: #fff;">日巡检</span></td>
                            <td><span id="dailyInspectionNormalCount"></span>/<span id="dailyInspectionCount"></span>
                            </td>
                            <td>正常/全部</td>
                          </tr>
                          <tr>
                            <td><img src="/leader/assets/health.png" /></td>
                            <td><span style="color: #fff;">健康巡检</span></td>
                            <td><span id="healthInspectionNormalCount"></span>/<span id="healthInspectionCount"></span>
                            </td>
                            <td>正常/全部</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="box asset-trend-box">
              <img src="/leader/assets/boxborder-1.png" class="topright" />
              <img src="/leader/assets/boxborder-2.png" class="leftbottom" />
              <div class="title">服务时长占比</div>
              <div class="body">
                <div class="row">
                  <div class="col-md-12">
                    <div id="service-time-stats" class="inner-nopadding"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- jQuery 3 -->
  <script src="/leader/js/jquery.min.js"></script>
  <!-- Bootstrap 3.4.1 -->
  <script src="/leader/js/bootstrap.min.js"></script>
  <script src="/leader/js/moment-with-locales.min.js"></script>
  <script src="/leader/js/echarts.min.js"></script>
  <script src="/leader/js/leader.js?v=2"></script>
  <!-- <script src="/leader/js/map.js"></script> -->
  <script>
    $(function () {
      init()
      institutions()
      setInterval(init, 1000 * 10)
      function init() {
        // 服务概况
        $.get('/api/w/leader/service/summary', function (res) {
          $('#serviceDayCount').text(res.data.serviceDayCount)
          $('#instCount').text(res.data.instCount)
          $('#assetCount').text(res.data.assetCount)
          $('#totalServiceTime').text(res.data.totalServiceTime)
          $('#totalServiceCount').text(res.data.totalServiceCount)

          $('#assetOnlineCount').text(res.data.assetCount)
          $('#assetOfflineCount').text(0)
        })

        // 故障处理状态
        $.get('/api/w/leader/malfunction/summary', function (res) {
          $('#malfunctionMonthFinishedCount').text(res.data.monthFinishedCount)
          $('#malfunctionProcessingCount').text(res.data.processingCount)
        })

        // 巡检服务状态
        $.get('/api/w/leader/inspection/summary', function (res) {
          $('#dailyInspectionCount').text(res.data.dailyInspectionCount)
          // $('#dailyInspectionNormalCount').text(res.data.dailyInspectionNormalCount)
          $('#dailyInspectionNormalCount').text(res.data.dailyInspectionCount)
          $('#healthInspectionCount').text(res.data.healthInspectionCount)
          // $('#healthInspectionNormalCount').text(res.data.healthInspectionNormalCount)
          $('#healthInspectionNormalCount').text(res.data.healthInspectionCount)
        })

        // 资产在线状态
        $.get('/api/w/leader/asset/summary', function (res) {
          // $('#assetOnlineCount').text(res.data.onlineCount)
          // $('#assetOfflineCount').text(res.data.offlineCount)
        })
      }

      function institutions() {
        $.get('/api/w/leader/institutions', function (res) {
          var trList = ''
          for(var i=0; i<res.data.length; i++) {
            var item = res.data[i];
            var residents = item.residents.map(it => it.name).join('，')
            var tr = '<tr><th scope="row">'+ (i+1) +'</th><td>'+ item.name +'</td><td>'+ residents +'</td></tr>'
            trList += tr;
          }
          $("#map table tbody").empty();
          $("#map table tbody").append(trList);
        })
      }
    })
  </script>
</body>

</html>